<template>
    <div class="index_b">
        <v-header ref="header" @into="goto('mmy')"></v-header>
        <div class="indexbox" :style="{height:docHeight}" ref="box">
            <div class="index">
                <div>
                    <div id='code'></div>
                    <canvas id="canvas"></canvas>
                </div>
               <!-- <img src="../assets/qr.png" alt="" class="qrcodepicture"> -->
            <div class="opencard_title">
                微信扫一扫
            </div>
            </div>
        </div>
        <v-footer title="1" ref="footer" @into="goto('mmy')"></v-footer>
    </div>
</template>
<script>
import header from './common/mheader'
import footer from './common/mfooter'
import QRCode from 'qrcode'
import cookie from '../../store/modules/cookie'
    export default {
        components: {
            'v-header': header,
            'v-footer': footer,
            QRCode: QRCode
        },
        data () {
            return {
                docHeight: '',
                headerHeight:0,
                footerHeight:0,
                success:false
            }
        },
        mounted () {
            this.headerHeight = this.$refs.header.$refs.headerbox.offsetHeight
            this.footerHeight = this.$refs.footer.$refs.footerbox.offsetHeight
            this.docHeight = (document.documentElement.clientHeight-this.headerHeight-this.footerHeight)+'px'            
        },
        created () {
            this.$nextTick(()=> {
                this.useqrcode()
            })
        },
        methods: {
            useqrcode(){
                let that = this
                let openid = cookie.getCookie('openid')
                var canvas = document.getElementById('canvas')
                that.$http.get('merchant/index/getRefcode',{openid:openid}).then((res)=>{
                    if(res.code==0){
                        QRCode.toCanvas(canvas, encodeURI(res.data), function (error) {
                            if (error)that.$messagebox(error)
                        })
                    }else{
                        that.$messagebox(res.msg)
                    }
                })
            },
            goto(path){
                let that = this
                this.$router.push({
                    path:'/'+path,
                })
            }
        }
    }
</script>
<style scoped>
.indexbox{
    padding: 0 61px;
    background: #000;
}
.index{
    background: #fff;
    text-align: center;
    padding: 120px 15px 70px;
    box-sizing: border-box;
    width: 1000px;
}
.qrcodepicture{
    width: 737px;
    height: 749px;
}
.opencard_title{
    font-size: 60px;
    color: #000000;
    line-height: 87px;
    padding-top: 62px;
}
#canvas{
    width: 500px ;
    height: 500px;
    z-index: 999;
}
</style>